<template>
	<a-card>
		<div style="background-color: #0d84ff">
			<div style="float: right;margin-bottom: 8px">
				<a-button style="margin-right: 8px;">
					<template #icon>
						<upload-outlined @click="upLoadShow =true" />
					</template>
				</a-button>
				<a-button>
					<template #icon>
						<clock-circle-outlined @click="logShowclick" />
					</template>
				</a-button>
			</div>
		</div>
		<a-table ref="table" :pagination="false" :scroll="{ x: 600 }"  :columns="columns" :data-source="tableData" bordered>
			<template #bodyCell="{ column, text,record }">
				<template v-if="column.dataIndex === 'actions'">
					<a-button type="link" @click="addLibraries(record,0)" >入库</a-button>
					<a-button type="link" @click="editLibraries(record,1)" >出库</a-button>
				</template>
				<template v-if="column.dataIndex === 'weight'">
					{{text}}
				</template>
			</template>

			<template #summary>
				<a-table-summary-row>
					<a-table-summary-cell>{{arritem.name}}</a-table-summary-cell>
					<a-table-summary-cell>
					</a-table-summary-cell>
					<a-table-summary-cell>
						<a-typography-text>{{ arritem.weight }}</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell>
						<a-typography-text>{{arritem.amount }}</a-typography-text>
					</a-table-summary-cell>
					<a-table-summary-cell>
					</a-table-summary-cell>
				</a-table-summary-row>
			</template>
		</a-table>
		<a-modal :width="700" v-model:visible="upLoadShow" title="导入数据" :footer="null">

			<a-upload-dragger
				:beforeUpload="fileChange"
			>
				<p class="ant-upload-drag-icon">
					<inbox-outlined></inbox-outlined>
				</p>
				<p class="ant-upload-text">点击上传或将文件拖动到此处</p>
				<template #itemRender="{ file, actions }">
					{{''}}
				</template>
			</a-upload-dragger>
		</a-modal>
		<a-modal :width="700" v-model:visible="LibrariesShow" :title="titlekey == 0?'入库操作':'出库操作'" @ok="addLibrariesOk">
			<a-form :model="addFormData"  v-bind="layout">
				<a-form-item label="数量">
					<a-input v-model:value="addFormData.val" placeholder="请输入数量">
					</a-input>
				</a-form-item>
<!--				<a-form-item label="人员选择">-->
<!--&lt;!&ndash;					<a-select&ndash;&gt;-->
<!--&lt;!&ndash;						placeholder="请选择人员"&ndash;&gt;-->
<!--&lt;!&ndash;						v-model:value="addFormData.admin_id"&ndash;&gt;-->
<!--&lt;!&ndash;						:options="peroptions"&ndash;&gt;-->
<!--&lt;!&ndash;						:fieldNames="fieldNames"&ndash;&gt;-->
<!--&lt;!&ndash;					></a-select>&ndash;&gt;-->
<!--				</a-form-item>-->

				<a-form-item  label="备注">
					<a-textarea v-model:value="addFormData.remarks" placeholder="备注信息" allow-clear />
				</a-form-item>
			</a-form>
		</a-modal>
		<a-modal :width="800" v-model:visible="logShow" title="操作日志">
			<a-table ref="table" :pagination="false" :scroll="{ x: 700 }"  :columns="logcolumns" :data-source="logtableData" bordered>
				<template #bodyCell="{ column, text,record }">
					<template v-if="column.dataIndex === 'addtime'">
						{{timeGET(text)}}
					</template>
					<template v-if="column.dataIndex === 'admin_id'">
						{{adminGet(text)}}
					</template>
				</template>
			</a-table>
		</a-modal>
	</a-card>

</template>

<script>
	import materialJsApi from "@/api/auth/material";
	import indexJsApi from "@/api/auth/index";
	import operationlogJsApi from "@/api/auth/operation_log";
	import adminJsApi from "@/api/auth/admin";
	export default {
		name: "index",
		data(){
			return {
				logShow:false,
				layout : {
					labelCol: {
						span: 4,
					},
					wrapperCol: {
						span: 16,
					},
				},
				fieldNames:{ label: 'name', value: 'admin_id' },
				peroptions:[],
				addFormData:{},
				LibrariesShow:false,
				titlekey:null,
				fileList:[],
				upLoadShow:false,
				columns:[
					{
						title: '物品名称',
						dataIndex: 'name',
						key: 'name',
						width:'100px'
					},
					{
						title: '物品单位',
						dataIndex: 'unit',
						key: 'unit',
						width:'200px'
					},
					{
						title: '重量(数量)',
						dataIndex: 'weight',
						key: 'weight',
						width:'100px'
					},
					{
						title: '金额',
						dataIndex: 'amount',
						key: 'amount',
						width:'100px'
					},
					{
						title: '操作',
						dataIndex: 'actions',
						key: 'actions',
						align:'center',
						width:'230px'
					},

				],
				headerToke:{

				},
				tableData:[],
				arritem:{},
				logtableData:[],
				logcolumns:[
					{
						title: '物品名称',
						dataIndex: 'material',
						key: 'material',
						width:'100px'
					},
					{
						title: '用户名称',
						dataIndex: 'admin_id',
						key: 'admin_id',
						width:'100px'
					},
					{
						title: '变动量',
						dataIndex: 'val',
						key: 'val',
						width:'100px'
					},
					{
						title: '备注',
						dataIndex: 'remarks',
						key: 'remarks',
						width:'100px'
					},
					{
						title: '添加时间',
						dataIndex: 'addtime',
						key: 'addtime',
						width:'100px'
					},
				]
			}
		},
		created() {
			this.init()
		},
		methods:{
			init(){
				materialJsApi.materialList().then(res =>{
					this.arritem = res.splice(res.length-1,1)[0]
					let arr = res.slice(0,-1)
					this.tableData = arr
				})
				adminJsApi.adminList({page:1,...this.formState}).then(res => {
					this.peroptions = res
				})
				this.addFormData.admin_id = localStorage.getItem('adminId')
			},
			handleOk(){
				const formData = new FormData()
			},
			timeGET(VAL){
				var oDate = new Date(VAL),
					oYear = oDate.getFullYear(),
					oMonth = oDate.getMonth() + 1,
					oDay = oDate.getDate(),
					oHour = oDate.getHours(),
					oMin = oDate.getMinutes(),
					oSen = oDate.getSeconds(),
					oTime = oYear + '-' +this.addZero(oMonth) + '-' + this.addZero(oDay) + ' ' + this.addZero(oHour) + ':' +
						this.addZero(oMin) + ':' + this.addZero(oSen);
				return  oTime
			},
			fileChange(file1){
				const formData = new FormData()
				formData.append('file',file1)
				indexJsApi.indexImport(formData).then(res =>{
					this.upLoadShow =false
					this.init()
				})
			},
			addZero(num){
				if (parseInt(num) < 10) {
					num = "0" + num
				}
				return num
			},
			addLibraries(record,key){
				this.titlekey = key
				this.LibrariesShow = true
				this.addFormData.material_id = record.material_id
			},
			editLibraries(record,key){
				this.titlekey = key
				this.LibrariesShow = true
				this.addFormData.material_id = record.material_id
			},
			adminGet(val){
				return this.peroptions.filter(item => item.admin_id == val).length>0?this.peroptions.filter(item => item.admin_id == val)[0].name:''
			},
			addLibrariesOk(){
				materialJsApi.materialEdit(this.addFormData).then(res =>{
					this.LibrariesShow = false
					this.init()
				})
			},
			loginit(){
				operationlogJsApi.operationlogList().then(res =>{
					this.logtableData = res
				})
			},
			logShowclick(){
				this.logShow = true
				this.loginit()
			}
		}
	}
</script>

<style scoped>

</style>
